<script setup>
import { ref } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue';

import { commodityGetListService, deleteCommodity } from '@/apis/commodity';

import { CommonElePlusTableEventHandler as TableEventHandler } from '@/utilities/tableeventhandle';

import router from '@/router';
import CommodityCategorySelect from './components/CommodityCategorySelect.vue';

const params = ref({
  categoryId: '',
  pageIndex: 1,
  pageSize: 10,
  sortField: '',
  isAsc: false
});

const loading = ref(false);

const commodityList = ref([]);
const total = ref(0);
const getCommodityList = async () => {
  loading.value = true;
  const res = await commodityGetListService(params.value);
  commodityList.value = res.data;
  total.value = res.total;

  loading.value = false;
};

getCommodityList();

const tableEventHanler = new TableEventHandler(params, getCommodityList);

const onSortChange = tableEventHanler.onSortChange;
const onSizeChange = tableEventHanler.onSizeChange;
const onCurrentChange = tableEventHanler.onCurrentChange;
const onSearch = tableEventHanler.onSearch;
const onReset = tableEventHanler.onResetFunc(() => {
  params.value.cate_id = '';
  params.value.state = '';
});

const onAddCommodity = () => {
  router.push('/commodity/add');
};

const onEditCommodity = (row) => {
  router.push({
    path: '/commodity/edit',
    query: { id: row.id }
  });
};

// 删除分类
const confirmDialogVisible = ref(false);
const toDeleteItem = ref({});
const onDeleteCommodity = (row) => {
  toDeleteItem.value = row;
  confirmDialogVisible.value = true;
};
const doDeleteCommodity = async () => {
  let res = await deleteCommodity({ id: toDeleteItem.value.id });
  ElMessage.success(res.msg);
  confirmDialogVisible.value = false;
  getCommodityList();
};
</script>

<template>
  <page-container title="商品管理">
    <template #extra>
      <el-button @click="onAddCommodity()">添加商品</el-button>
    </template>

    <!--表单区域-->
    <el-form inline>
      <el-form-item label="商品分类：">
        <commodity-category-select
          v-model="params.categoryId"
        ></commodity-category-select>
      </el-form-item>
      <el-form-item label="商品状态：">
        <el-input></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="commodityList"
      @sort-change="onSortChange"
      v-loading="loading"
    >
      <el-table-column prop="commodityName" label="商品名称"></el-table-column>
      <el-table-column prop="manufacture" label="制造商"></el-table-column>
      <el-table-column
        prop="skuCount"
        label="SKU 数量"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        prop="lastModifyTime"
        label="最后更新时间"
        sortable="custom"
      ></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            circle
            plain
            type="primary"
            :icon="Edit"
            @click="onEditCommodity(row)"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            :icon="Delete"
            @click="onDeleteCommodity(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="pagination"
      v-model:current-page="params.pageIndex"
      v-model:page-size="params.pageSize"
      :page-sizes="[5, 10, 20, 50]"
      :background="true"
      layout="jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />
  </page-container>

  <el-dialog v-model="confirmDialogVisible" title="提示" width="30%">
    <span class="dialog-span">
      是否确定删除商品：
      <strong>{{ toDeleteItem && toDeleteItem.commodityName }}</strong>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="confirmDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doDeleteCommodity()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.pagination {
  margin-top: 20px;
  justify-content: flex-end;
}
</style>
